<template>
    <div class="app-container">
        <el-form label-width="120px">

            <el-form-item label="信息描述">
                <el-tag type="info">excel模板说明</el-tag>
                <el-tag>
                    <i class="el-icon-download" />
                    <a :href="defaultExcelTemplate">点击下载模板</a>
                </el-tag>
            </el-form-item>

            <el-form-item label="选择Excel">
                <el-upload ref="upload" :auto-upload="false" :on-exceed="fileUploadExceed" :on-success="fileUploadSuccess"
                    :on-error="fileUploadError" :limit="1" action="http://localhost:8110/admin/edu/subject/import"
                    name="file"
                    accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                    <el-button slot="trigger" size="small" type="primary">
                        选取文件
                    </el-button>
                    <el-button :disabled="importBtnDisabled" style="margin-left: 10px;" size="small" type="success"
                        @click="submitUpload">导入</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    data() {
        return {
            defaultExcelTemplate: 'https://guli-file-202307.oss-cn-beijing.aliyuncs.com/excle/%E8%AF%BE%E7%A8%8B%E5%88%86%E7%B1%BB%E6%A8%A1%E6%9D%BF.xlsx',
            importBtnDisabled: false // 导入按钮是否禁用
        }
    },
    methods: {
        // 当选择文件超出约定数量时触发
        fileUploadExceed() {
            this.$message.warning('只能选取一个文件')
        },
        // 上传成功的回调
        fileUploadSuccess(response) {
            this.importBtnDisabled = false // 启用按钮
            this.$message.success(response.message)
            this.$refs.upload.clearFiles() // 清空文件列表
        },
        // 上传失败的回调
        fileUploadError(err) {
            this.importBtnDisabled = false // 启用按钮
            this.$message.error(err.message)
        },
        // 执行上传
        submitUpload() {
            this.importBtnDisabled = true // 禁用按钮
            this.$refs.upload.submit() // 手动表单提交


        }
    }
}
</script>
